<template>
    <view class="select-area-item">
        <view class="province">
            <view class="flex-start" @click="showMenu = !showMenu">
                <uni-icons :type="showMenu ? 'arrowdown' : 'arrowright'" customIcons="color-gray"></uni-icons>
                <view class="name">{{ item.name }}</view>
            </view>
            <view class="right" @click="allselect">
                <view v-if="!half">
                    <view class="noselect" v-if="!item.checked"></view>
                    <view class="yesselect" v-else>
                        <iconsfont customIcons="icon-dagou" :color="'#ffffff'" size="20"></iconsfont>
                    </view>
                </view>
                <view class="yesselect" v-else>
                    <view class="line"></view>
                </view>
            </view>
        </view>
        <view v-show="showMenu">
            <select-classify-sub-item
                v-for="(subItem, subIndex) in item.children"
                :key="subIndex"
                :subItem="subItem"></select-classify-sub-item>
        </view>
    </view>
</template>

<script>
import selectClassifySubItem from "@/components/select/select-classify-sub-item.vue"

export default {
    components: {
        selectClassifySubItem,
    },
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            showMenu: false,
            half: false,
        }
    },
    mounted() {
        // this.halfselect()
    },
    methods: {
        allselect() {
            this.item.checked = !this.item.checked
            // this.item.Children.forEach((e) => {
            //     e.checked = this.item.checked
            // })
            // if (!this.item.checked) this.half = false
        },
        halfselect(data) {
			console.log(1)
			console.log(data)
            let inspection = 0
            this.item.Children.forEach((e) => {
                if (e.checked) {
                    inspection++
                }
            })
            if (inspection > 0 && inspection < this.item.Children.length) {
                this.half = true
            }
            if (inspection > 0 && inspection == this.item.Children.length) {
                this.item.checked = true
                this.half = false
            }
            if (inspection == 0) {
                this.half = false
                this.item.checked = false
            }
        },
    },
}
</script>

<style lang="scss">
.province {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 112rpx;
    margin: 0 40rpx 0 34rpx;
    border-bottom: 2rpx solid #ebebeb;
    .flex-start {
        flex: 1;
        height: 112rpx;
    }
    .right {
        padding-left: 40rpx;
    }
    .name {
        padding-left: 22rpx;
        font-size: 34rpx;
        color: $color-gray-1;
    }
}
.noselect {
    width: 38rpx;
    height: 38rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 8rpx;
}
.yesselect {
    width: 40rpx;
    height: 40rpx;
    background: $app-color-main;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .line {
        width: 60%;
        height: 6rpx;
        background: #ffffff;
    }
}
</style>
